<template>
  <el-container>
    <el-header>
      <el-row>
       <!-- <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <div>姓名：</div>
        </el-col> -->
        <el-col :span="6">
          <el-input size="mini" v-model="input" placeholder="请输入药品助记码"></el-input>
        </el-col>
        <el-col :span="4" >

          <el-button size="mini" type="primary" @click="queryDrug()"><i class="el-icon-view"></i> 查询药品</el-button>
        </el-col>
        <el-col :span="10">
          <el-button size="mini" type="primary" @click="toAddNewDrug()"><i class="el-icon-edit"></i> 新增药品</el-button>
        </el-col>
        <el-dialog :visible.sync="dialogVisible">
          <span>新增药品</span><br>
          <el-form :model="addDrugForm" label-width="80px">
            <el-form-item label="* 药品编码">
              <el-input v-model="addDrugForm.drugsCode"></el-input>
            </el-form-item>
            <el-form-item label="* 药品名称">
              <el-input v-model="addDrugForm.drugsName"></el-input>
            </el-form-item>
            <el-form-item label="* 药品单价">
              <el-input v-model="addDrugForm.drugsPrice"></el-input>
            </el-form-item>
            <el-form-item label="* 药品剂型">
              <el-select v-model="addDrugForm.drugsDosageID" placeholder="请选择">
                <el-option v-for="item in DrugsDosage" :key="item.ID" :label="item.ConstantName" :value="item.ID"></el-option>
                 </el-select>
            </el-form-item>
            <el-form-item label="* 药品类型">
              <el-select v-model="addDrugForm.drugsTypeID" placeholder="请选择">
                <el-option v-for="item in drugsType" :key="item.ID" :label="item.ConstantName" :value="item.ID"></el-option>
                 </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
              <el-button size="mini" type="primary" @click="addNewDrug()" >确 定</el-button>
          </span>
        </el-dialog>
        <el-col :span="4">
          <el-button size="mini" type="primary" icon="el-icon-sold-out" @click="showislogin()">导入药品</el-button>
        </el-col>
      </el-row>
    </el-header>
      <el-row>
        <el-col :span='24'>
      <el-table :data="drugTables">
        <el-table-column  label="药品编码" prop="DrugsCode"></el-table-column>
        <el-table-column label="药品名称" prop="DrugsName"></el-table-column>
        <el-table-column label="药品单价" prop="DrugsPrice"></el-table-column>
        <el-table-column label="药品剂型" prop="ConstantName"></el-table-column>
        <el-table-column label="药品类型" prop="DrugsTypeID">
          <template slot-scope="scope">
            {{scope.row.DrugsTypeID | drugtypeFilter }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
               <el-button size="mini" @click="toupdateDrug(scope.$index, scope.row)">编辑</el-button>
               <el-dialog :visible.sync="updateDialogVisible">
                 <span>修改药品</span><br>
                 <el-form :model="updateDrugForm" label-width="80px">
                   <el-form-item label="* 药品编码">
                     <el-input v-model="updateDrugForm.drugsCode"></el-input>
                   </el-form-item>
                   <el-form-item label="* 药品名称">
                     <el-input v-model="updateDrugForm.drugsName"></el-input>
                   </el-form-item>
                   <el-form-item label="* 药品单价">
                     <el-input v-model="updateDrugForm.drugsPrice"></el-input>
                   </el-form-item>
                   <el-form-item label="* 药品剂型">
                     <el-select v-model="updateDrugForm.drugsDosageID" placeholder="请选择">
                       <el-option v-for="item in DrugsDosage" :key="item.ID" :label="item.ConstantName" :value="item.ID"></el-option>
                        </el-select>
                   </el-form-item>
                   <el-form-item label="* 药品类型">
                     <el-select v-model="updateDrugForm.drugsTypeID" placeholder="请选择">
                       <el-option v-for="item in drugsType" :key="item.ID" :label="item.ConstantName" :value="item.ID"></el-option>
                        </el-select>
                   </el-form-item>
                 </el-form>
                 <span slot="footer" class="dialog-footer">
                     <el-button size="mini" @click="updateDialogVisible = false">取 消</el-button>
                     <el-button size="mini" type="primary" @click="updateDrug()" >确 定</el-button>
                 </span>
               </el-dialog>
               <el-button size="mini" type="danger"  @click="getIdClickde(scope.$index, scope.row)">删除</el-button>
        </template>
        </el-table-column>
      </el-table>
      </el-col>
      </el-row>
      <el-row>
        <el-col :span='24'>
      <el-pagination layout="prev, pager, next" :total="totalNumber"  :hide-on-single-page="pageshow" @current-change="pageChange"></el-pagination>
      </el-col>
      </el-row>
  </el-container>
</template>

<script>
  import {postRequest} from '../../utils/ajaxapi'
  import {getRequest} from '../../utils/ajaxapi'
  export default {
    mounted:function(){
      this.getDrug(1,10,'');
    },
    filters:{
      drugtypeFilter:function(value){
        if(value == 101 || value == '101'){
          return "西药"
        }else if(value == 102 || value == '102'){
          return "中成药"
        }else if(value == 103 || value == '103'){
          return "中草药"
        }
        return '';
      }
    },
    data() {
      return {
        drugTables:[{
          DrugsCode:'',
          DrugsName:'',
          DrugsPrice:'',
          ConstantName:'',
          DrugsTypeID:''
        }],
        input: '',
        dialogVisible:false,
        updateDrugForm:{
          drugsName:'',
          drugsCode:'',
          drugsPrice:'0',
          drugsDosageID:'',
          drugsTypeID:''
        },
        updateDialogVisible:false,
        addDrugForm:{
          drugsName:'',
          drugsCode:'',
          drugsPrice:'',
          drugsDosageID:'',
          drugsTypeID:''
        },
        DrugsDosage:[{
        ContantCode:'',
        ConstantTypeID:'',
        ContantName:"",
        ID:'',
        DelMark:''
        }],
        drugsType:[{
          ContantCode:'',
          ConstantTypeID:'',
          ContantName:"",
          ID:'',
          DelMark:''
        }],
        //该变量是分也显示的总条数，后台数据库查询数量赋值给该变量
        totalNumber:9,
        pageshow:false  //只有一页的时候false 显示 true不显示
      }
    },
    methods:{
      //增加药品
      /* addNewDrug(){
        this.$axios.post("/drugmage/addNewDrug",this.addDrugForm)
        .then(function(response){
          console.log(response)
        })
         alert(this.addDrugForm.drugsName);
        this.dialogVisible = false;
      } */


      //把post当作一个单独函数写法
      addNewDrug(){
        let _this = this;
       postRequest("/drugmage/addNewDrug",this.addDrugForm)
        .then(function(response){
         /* alert(_this.addDrugForm.drugsName); */
        // _this.addDrugForm.drugsName = response.data.drugsName
        })
      },
      toAddNewDrug(){
        this.getDrugDosByConst();
        this.dialogVisible = true;
      },

      //查询药品类型
      getDrugDosByConst(){
        let _this = this;
        //this.dialogVisible=true
        getRequest("/constantItem/getConstantItemByTypeid?typeid=11")
        .then(function(response){
          /* alert(response.data); */
          _this.DrugsDosage = response.data;
        })
        getRequest("/constantItem/getConstantItemByTypeid?typeid=10")
        .then(function(response){
           _this.drugsType = response.data;
        })
      },

      //形参说明：pageNumber页码数
      //pageSize 每页显示的行数
      //查询的关键字
      getDrug(pageNumber,pageSize,drugN){
        let _this = this;
        getRequest("/drugmage/getDrugs?pageNumber="+pageNumber+"&pageSize="+pageSize+"&DrugsName="+drugN)
        .then(function(response){
          //vue中给表格绑定的变量赋值，相当于给表格填充数据
          _this.drugTables = response.data.map;
          _this.totalNumber = response.data.pageNumber;
        })
      },

      queryDrug(){
        if(this.input == null){
          this.input = '';
        }
        this.getDrug(1,10,this.input);
      },

      //分页组件 改变页码时执行
      //参数：pageNum
      pageChange(pageNum){
        if(this.input == null){
          this.input = '';
        }
        this.getDrug(pageNum,10,this.input);
      },

      toupdateDrug(index,clickDrug){
        //this.updateDialogVisible = true
        this.updateDrugForm.drugsCode = this.drugTables[index].DrugsCode;
        this.updateDrugForm.drugsName = this.drugTables[index].DrugsName;
        this.updateDrugForm.drugsPrice = this.drugTables[index].DrugsPrice;
        this.getDrugDosByConst()
        this.updateDrugForm.drugsDosageID = this.drugTables[index].DrugsDosageID
        this.updateDrugForm.drugsTypeID = this.drugTables[index].DrugsTypeID
        this.updateDialogVisible = true
        localStorage.removeItem("islogin")
      },
      showislogin(){
      alert(localStorage.getItem("islogin"))
      }
    }
  }
</script>

<style>
</style>
